<div id="app"></div>
<script src="https://unpkg.com/vue"></script>
<script>
  function h(tag, props, children) {
    return {
      tag,
      props,
      children,
    };
  }

  function mount(vnode, container) {
    const tag = vnode.tag;
    const el = (vnode.el = document.createElement(tag)); // 在vnode上添加el属性，用来存储原dom结构

    // props
    if (vnode.props) {
      for (let key in vnode.props) {
        let value = vnode.props[key];
        el.setAttribute(key, value);
      }
    }
    // children
    if (vnode.children) {
      if (typeof vnode.children === "string") {
        el.textContent = vnode.children;
      } else {
        vnode.children.forEach((child) => {
          mount(child, el);
        });
      }
    }

    container.appendChild(el);
  }
  const vdom = h(
    "div",
    {
      class: "red",
    },
    [h("span", null, "hello")]
  );
  mount(vdom, document.getElementById("app"));
</script>
